<!-- 免费试算模态框组件 -->
<div class="modal">
  <div class="modal-overlay"></div>
  <div class="modal-content">
    <button class="modal-close"><i class="fas fa-times"></i></button>
    <div class="modal-header">
      <div class="modal-icon">
        <i class="fas fa-calculator"></i>
      </div>
      <h2 class="modal-title">免费试算</h2>
      <p class="modal-subtitle">填写以下信息，获取您的专属计算方案</p>
    </div>
    
    <div class="modal-body">
      <form id="trial-calculation-form" class="trial-form">
        <div class="form-row">
          <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" id="name" name="name" placeholder="请输入您的姓名" required>
          </div>
          <div class="form-group">
            <label for="phone">电话</label>
            <input type="tel" id="phone" name="phone" placeholder="请输入您的联系电话" required>
          </div>
        </div>
        
        <div class="form-group">
          <label for="email">邮箱</label>
          <input type="email" id="email" name="email" placeholder="请输入您的邮箱地址" required>
        </div>
        
        <div class="form-group">
          <label for="company">公司名称</label>
          <input type="text" id="company" name="company" placeholder="请输入您的公司名称" required>
        </div>
        
        <div class="form-row">
          <div class="form-group">
            <label for="industry">所属行业</label>
            <select id="industry" name="industry" required>
              <option value="">请选择行业</option>
              <option value="ai">人工智能</option>
              <option value="bigdata">大数据分析</option>
              <option value="science">科学研究</option>
              <option value="manufacturing">制造业</option>
              <option value="finance">金融服务</option>
              <option value="education">教育科研</option>
              <option value="other">其他行业</option>
            </select>
          </div>
          <div class="form-group">
            <label for="calculation-type">计算类型</label>
            <select id="calculation-type" name="calculation-type" required>
              <option value="">请选择计算类型</option>
              <option value="ai">AI训练/推理</option>
              <option value="simulation">工业仿真</option>
              <option value="rendering">渲染计算</option>
              <option value="scientific">科学计算</option>
              <option value="other">其他计算</option>
            </select>
          </div>
        </div>
        
        <div class="form-group">
          <label for="requirements">计算需求描述</label>
          <textarea id="requirements" name="requirements" rows="4" placeholder="请简要描述您的计算需求，如模型大小、数据量、预期性能等"></textarea>
        </div>
        
        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" id="privacy-agreement" name="privacy-agreement" required>
            <span>我已阅读并同意<a href="#" style="color: var(--primary-color);">《隐私政策》</a>和<a href="#" style="color: var(--primary-color);">《服务条款》</a></span>
          </label>
        </div>
        
        <div class="form-actions">
          <button type="submit" id="trial-submit" class="btn btn-primary submit-btn">
            <span class="btn-text">提交申请</span>
            <span class="btn-loading" style="display: none;">
              <i class="fas fa-spinner fa-spin"></i> 提交中...
            </span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 模态框样式 -->
<style>
/* 模态框样式已在trial-form.css中定义，此处仅包含必要的结构样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
}

.modal.active {
  display: block;
}

/* 确保表单元素样式正确应用 */
.trial-form .form-group {
  margin-bottom: 20px;
}

.trial-form .form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.trial-form .form-row .form-group {
  flex: 1;
  min-width: 200px;
}

@media (max-width: 768px) {
  .trial-form .form-row {
    flex-direction: column;
  }
}
</style>